<template>
    <div class="cateTreeWarp">
        <el-input size="mini" placeholder="输入筛选" style="width: 90%;margin:10px 0px;"></el-input>
        <el-tree :highlight-current="true" class="cateTree" :data="treeData" :props="defaultProps" @node-click="nodeClick"></el-tree>
    </div>
</template>

<script>
export default {
    props: {
        treeData: {
            type: Array,
            default: () => []
        },
        defaultProps: {
            type: Object,
            default: () => {
                return { children: 'children', label: 'label' }
            }
        }
    },
    methods: {
        nodeClick(node) {
            this.$emit("nodeClick", node);
        }
    }
}
</script>

<style lang="scss" scoped>
.cateTreeWarp {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    .cateTree {
        max-width: 320px;
        min-width: 180px;
        min-height: 77.7vh;
        max-height:77.7vh;
        overflow-y:auto;
        overflow-x:hidden;
        background: #f7f8fa;
    }
}

::v-deep .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
    background: #c0e7ff
}
</style>